<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css?v=1">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx }/css/k.css">
    <title>软装到家</title>
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <style type="text/css">
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
	    
    </style>
</head>
<body>
 
<div class="simple-nav sub-nav w-1200 margin-0-auto">
    <img class="fl login-logo" src="${ctx }/res/img/icon/login-logo.png">
    <ul class="tag-label">
        <li class="zhixiao"><i class="icon icon-zhixiao"></i>工厂直销</li>
        <li class="dijia"><i class="icon icon-dijia"></i>低价保证</li>
        <li class="fuwu"><i class="icon icon-fuwu"></i>极致服务</li>
        <li class="zhibao"><i class="icon icon-zhibao"></i>三年质保</li>
    </ul></div>
<div class="login-body-warp w-100p margin-0-auto">
    <div class="login-body  margin-0-auto">
        <div class="login-form-warp">
            <div class="login-form">
                <div class="title">
                    <span class="h1">账号登录</span>
                    <a href="#" class="register js-reg-choose">新用户注册</a>
                </div>
                <form action="${ctx }/j_spring_security_check" method="post" id="loginForm">
                    <input type="hidden" name="j_username" id="j_username" />
                    <input class="username input" type="text" id="j_mobile" value="${loginUsername }" placeholder="用户名/手机号"/>
                    <input class="password input" type="password" name="j_password" id="j_password" placeholder="密码"/>
                    <c:if test="${not empty loginError }">
	                	<div style="color:red;font-size:10px;margin-left:35px;margin-top:30px;">${loginError }</div>
	                </c:if>
                    <c:if test="${empty loginError && not empty param.error}">
	                	<div style="color:red;font-size:10px;margin-left:35px;margin-top:30px;">用户名或密码不正确</div>
	                </c:if>
                    <button  class="submit" type="submit" onclick="return checkMobile()">登录</button>
                </form>
                <a href="#" class="forget-pwd js-forget-pwd">忘记密码</a>
            </div>
         </div>
    </div>
</div>
<%@include file="../foot.jsp" %>
<div class="right-nav">
    <div class="navs">
        <div class="nav-item ">
            <i class="icon kefu"></i>
            <div class="left-box">
                <a href="tencent://message/?uin=3448878138">联系客服</a>    
            </div>
        </div>
        <div class="nav-item ">
            <i class="icon shopcart"></i>
            <div class="left-box">
                <a href="${ctx }/cart/cartList" target="_blank">购物车</a>
            </div>
        </div>
        <div class="nav-item ">
            <i class="icon qrcode"></i>
            <div class="left-box qrcode-box">
                <img src="${ctx }/res/img/appCode.jpg">
            </div>
        </div>
    </div>
    <div class="gototop js-gototop">
        <i class="icon"></i>
    </div>
</div>
<script type="text/javascript">
    $(document).on('click','.js-gototop',function () {
        $("body").stop().animate( { scrollTop:0}, 500);
    })
    var height = $(window).height();
    $(window).scroll(function () {
        var scrollTop = $(document).scrollTop();
        if(scrollTop>height){
            $('.js-gototop').fadeIn();
        }else{
            $('.js-gototop').fadeOut();
        }
    })
</script>
<textarea style="display: none;" id="find-pwd-modal">
   <div class="find-pwd-warp">
   		<form method="post">
		    <div class="input-controller">
		        <input type="text" name="mobile" id="mobile" placeholder="请输入您的手机号码">
		    </div>
		    <div class="input-controller">
		        <input class="input-mini" name="valiCode" type="text" placeholder="请输入验证码">
		        <button class="btn btn-primary get-code" onclick="return getSmsCode(this);">获取验证码</button>
		    </div>
		    <div class="input-controller">
		        <input type="password" name="password" placeholder="请输入您的新密码">
		    </div>
		    <div class="input-controller">
		        <input type="password" name="passwordConfirm" placeholder="请确认您的新密码">
		    </div>
		    <div class="input-controller">
		        <button class="btn btn-primary submit" onclick="return findPwd(this);">确认重置</button>
		    </div>
	    </form>
	</div> 
</textarea>
<textarea style="display: none;" id="register-modal">
   <div class="reg-type-modal">
    <a class="btn  btn-primary reg-company" href="${ctx }/user/register">装修公司注册</a>
    <a class="btn reg-designer" href="${ctx }/user/register?registerType=designer">设计师注册</a>
</div> 
</textarea>
<script type="text/javascript">
	var modal = null;
    $(document).on('click', '.js-forget-pwd', function (event) {
        modal = $.fn.modal.showModal({
            title: '重置密码',
            content: $("#find-pwd-modal").val(),
            width: 420,
            height: 400
        });
        modal.show();
    });
    
    var timer = null;
    function getSmsCode(obj) {
    	if(timer != null) {
    		alert("对不起，已经发送了短信验证码，请读秒结束后再重新发送!");
    	} else {
    		var mobile = $('#mobile').val();
        	var json = {'mobile':mobile};
        	$.ajax({
        		url: "${ctx}/user/getSmsValiCode",
        		data:json,
        		dataType: "json",
        		type: "get",
        		success: function(data) {
        			if (data.success) {
        				secondsCount(obj);
        				//loading带文字
        			} else {
        				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
        			}
        		}
        	});
    	}
    	return false;
    }
    
    function secondsCount(obj) {
    	var seconds = 60;
    	timer = setInterval(function(){
    		if(seconds > 0) {
    			$(obj).html(seconds--+"秒后重发...");
    		} else {
    			stopCount(obj);
    		}
    	},1000);
    }
    
    function stopCount(obj) {
    	clearInterval(timer);
    	$(obj).html("重新获取验证码");
    	timer = null;
    }
    
    function findPwd(obj) {  //找回密码
    	var formObj = $(obj).parents("form");
    	info = formObj.serializeArray();
    	var json = {};
    	for(var i = 0;i < info.length; i ++ ) {
    		var theArr = info[i];
    		var key = theArr.name;
    		var value = theArr.value;
    		json[key] = value;
    	} 
    	$.ajax({
    		url: "${ctx}/user/findPwd",
    		data:json,
    		dataType: "json",
    		type: "get",
    		async:"false",
    		success: function(data) {
    			if (data.success) {
    				//loading带文字
    				layer.msg('密码更改成功，请牢记您的新密码...',{time: 2000, icon:6,shade: [0.5, '#f5f5f5']});
    				modal.close().remove();//提交数据 关闭窗口
    			} else {
    				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    			}
    		}
    	});
    	return false;
    }
    /*注册选择*/
    $(document).on('click', '.js-reg-choose', function (event) {
        var modal = $.fn.modal.showModal({
            id:'reg-choose-dialog',
            title: '新用户注册',
            content: $("#register-modal").val(),
            width: 370,
            height: 280
        });
        modal.show();
    })
</script>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/common.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.tab-box').tab();
        <c:if test="${isLocal}">
        $('#j_username').val('admin');
        $('#j_password').val('jklmnl2828');
        //$('#loginForm').submit();
        </c:if>
    })
    
    function checkMobile() {
    	$.ajax({
    		url: "${ctx}/user/convertMobile",
    		data: {
    			mobile: $('#j_mobile').val()
    		},
    		dataType: "json",
    		type: "post",
    		success: function(data) {
    			if (data.success) {
    				$('#j_username').val(data.username);
    				$('#loginForm').submit();
    			}
    		}
    	});
    	return false;
    }
</script>
</body>
</html>
